<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="5">
        <div style="border:1px solid #eee;height:calc(100vh - 150px);padding:20px 10px;min-width:200px;overflow: auto">
          <div>
            <el-input
              placeholder="输入关键字进行过滤"
              v-model="filterText" size="small">
            </el-input>
          </div>
          <div style="margin-top:20px" v-loading="dataLoading">
            <el-tree
              ref="tree"
              :expand-on-click-node="false"
              :highlight-current="true"
              @node-click="nodeClick"
              :data="data"
              node-key="id"
              default-expand-all
              :filter-node-method="filterNode"
              :props="props">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
              </span>
            </el-tree>
          </div>
        </div>
      </el-col>
      <el-col :span="19">
        <div style="border:1px solid #eee;min-height: calc(100vh - 150px);padding:20px">
          <el-table ref="productTable"
                    :data="list"
                    style="width: 100%;font-size: 12px;"
                    v-loading="listLoading"
                    border>
            <el-table-column label="品名" align="center" min-width="100">
              <template slot-scope="scope">{{scope.row.categoryName}}</template>
            </el-table-column>
            <el-table-column label="厂家"  align="center" min-width="100">
              <template slot-scope="scope">{{scope.row.brandName}}</template>
            </el-table-column>
            <el-table-column label="牌号"  align="center" min-width="150">
              <template slot-scope="scope">{{scope.row.goodsSn }}</template>
            </el-table-column>
            <el-table-column label="资料名称"  align="center" min-width="150">
              <template slot-scope="scope">{{scope.row.fileName}}</template>
            </el-table-column>
            <el-table-column label="分类"  align="center" min-width="100">
              <template slot-scope="scope">{{scope.row.className}}</template>
            </el-table-column>
            <el-table-column label="类型"  align="center" min-width="100">
              <template slot-scope="scope">{{scope.row.typeCodeName}}</template>
            </el-table-column>
            <el-table-column label="上传时间"  align="center" min-width="150">
              <template slot-scope="scope">{{scope.row.createTime}}</template>
            </el-table-column>
            <el-table-column label="操作"  align="center" min-width="150">
              <template slot-scope="scope">
                <el-button type="text" @click="toSeeIMG(scope.row)">附件</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-container">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              layout="total, sizes,prev, pager, next,jumper"
              :page-size="listQuery.pageSize"
              :page-sizes="[10,15,20]"
              :current-page.sync="listQuery.pageNum"
              :total="total">
            </el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>

  </div>
</template>
<script>

import {fileGoodsSnTree,fileGoodsSnList} from '@/api/partner'
const defaultListQuery = {
  "brandId" : "",
  "goodsSn" : "",
  pageNum: 1,
  pageSize: 10,
};


export default {
  name: "employeeSetting",
  data(){

    return{
      data : [],
      dataLoading:false,
      props: {
        label: 'name',
        children: 'list'
      },

      listQuery: Object.assign({}, defaultListQuery),
      list:[],
      listLoading: false,
      total:null,
      filterText:''
    }
  },
  created() {
    this.getList();
    this.getGoodsSnTree()
  },
  computed: {

  },

  filters: {

  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },

  methods:{
    toSeeIMG(item){
      window.open(item.fileUrl)
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },



    //部门树结构点击时
    nodeClick(data,node){
      if(node.level == 2){
        this.listQuery.pageNum = 1;
        this.listQuery.brandId = node.parent.data.id;
        this.listQuery.goodsSn = data.name;
        this.getList()
      }else if(node.level == 1){
        this.listQuery.pageNum = 1;
        this.listQuery.brandId = data.id;
        this.listQuery.goodsSn = '';
        this.getList()
      }
    },


    //获取部门列表
    getGoodsSnTree(){
      this.dataLoading = true;
      fileGoodsSnTree({keyword:''}).then((res)=>{
        this.data = res;
        this.dataLoading = false;
      })
    },

    //改变查看页数
    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },

    //改变页码
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },

    //搜索
    handleSearchList(){
      this.listQuery.pageNum = 1;
      this.getList();
    },

    /**
     *获取列表
     **/
    getList() {
      this.listLoading = true;
      let listQuery = JSON.parse(JSON.stringify(this.listQuery));
      fileGoodsSnList(listQuery).then(response => {
        this.listLoading = false;
        this.list = response.list;
        this.total = response.count;
      });
    },
    //点击部门
    nodeClick4(){
      this.needNodes = JSON.parse(JSON.stringify(this.$refs.tree.getCheckedNodes(true)));
    },
  }
}
</script>

<style scoped lang="scss">
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  padding-right: 8px;
  .el-tree-node__content{
    line-height: 30px;
  }
}
</style>
